<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>我的订单</p>
		</header>

		<!-- 订单列表部分 -->
		<div v-if="user.role == 2">
			<h3>未支付订单信息：</h3>
			<ul class="order">
				<li v-for="item in orderArr" :key="item.orderId">
					<template v-if="item.orderState==0">
					<div class="order-info">
						<p>
							{{(item.businessName)}}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.totalPrice}}</p>
							<div class="order-info-right-icon" @click="detailetPayment(item.orderId)">去支付</div>
							<div class="order-info-right-icon" @click="cancePayment(item.orderId)">取消</div>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet">
						<li v-for="odItem in item.priceDetails" :key="odItem.foodName">
							<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
							<p>&#165;{{odItem.foodPrice*odItem.quantity}}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.deliveryPrice}}</p>
						</li>
						<li>
							<p>总计</p>
							<p>&#165;{{item.totalPrice}}</p>
						</li>
					</ul>
					</template>
				</li>
			</ul>

			<h3>已支付订单信息：</h3>
			<ul class="order">
				<li v-for="item in orderArr" :key="item.orderId">
					<template v-if="item.orderState==1">
					<div class="order-info">
						<p>
							{{(item.businessName)}}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.totalPrice}}</p>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet">
						<li v-for="odItem in item.priceDetails" :key="odItem.foodName">
							<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
							<p>&#165;{{odItem.foodPrice*odItem.quantity}}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.deliveryPrice}}</p>
						</li>
						<li>
							<p>总计</p>
							<p>&#165;{{item.totalPrice}}</p>
						</li>
					</ul>
					</template>
				</li>
			</ul>
		</div>
		<div v-if="user.role == 1">
			<h3>未支付订单信息：</h3>
			<ul class="order">
				<li v-for="item in orderArr" :key="item.orderId">
					<template v-if="item.orderState==0">
					<div class="order-info">
						<p>
							{{item.userName}} - {{item.userId}}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.orderTotal}}</p>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet">
						<li v-for="odItem in item.orderDetail" :key="odItem.foodName">
							<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
							<p>&#165;{{odItem.foodPrice*odItem.quantity}}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.deliveryPrice}}</p>
						</li>
						<li>
							<p>总计</p>
							<p>&#165;{{item.orderTotal}}</p>
						</li>
					</ul> 
					</template>
				</li>  
			</ul> 

			<h3>已支付订单信息：</h3>
			<ul class="order">
				<li v-for="item in orderArr" :key="item.orderId">
					<template v-if="item.orderState==1">
					<div class="order-info">
						<p>
							{{item.userName}} - {{item.userId}}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.orderTotal}}</p>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet">
						<li v-for="odItem in item.orderDetail" :key="odItem.foodName">
							<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
							<p>&#165;{{odItem.foodPrice*odItem.quantity}}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.deliveryPrice}}</p>
						</li>
						<li>
							<p>总计</p>
							<p>&#165;{{item.orderTotal}}</p>
						</li>
					</ul> 
					</template>
				</li>  
			</ul> 
		</div>
		<!-- 底部菜单部分 -->
		<AppFooter></AppFooter>

	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue';
	
	export default{
		name:'OrderList',
		data(){
			return {
				orderArr:[],
				user:{}
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			
			if(this.user.role==2){
				this.$axios.post('OrdersController/listOrdersByUserId',this.$qs.stringify({
					userId:this.user.userId
				})).then(response=>{
					let re = response.data.result;
					
					for(let orders of re){
						orders.isShowDetailet = false;
						console.log(orders);
					}
					this.orderArr = re;
					
				}).catch(error=>{
					console.error(error);
				});
			}else if(this.user.role==1){
				this.$axios.post('OrdersController/business/orders',this.$qs.stringify({
					businessId:this.user.userId
				})).then(response=>{
					let re = response.data.result;
					for(let orders of re){
						orders.isShowDetailet = false;
					}
					this.orderArr = re;
				}).catch(error=>{
					console.error(error);
				});
			}
			
		},
		methods:{
			detailetShow(orders){
				orders.isShowDetailet = !orders.isShowDetailet;
			},
			detailetPayment(orderId) {
				this.$router.push({
					path: '/payment',
					query: {
						orderId: orderId
					}
				});
			},
			cancePayment(orderId){
				this.$axios.post('OrdersController/user/cancelOrder',this.$qs.stringify({
					orderId:orderId
				})).then(response=>{
					if(response.data.code=='200'){
						alert('取消成功！');
					}else{
						alert('取消失败！');
					}
					window.location.reload(true);
				}).catch(error=>{
					console.error(error);
				});
			}
		},
		components:{
			AppFooter
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		min-height: 150vh;
		display: flex;
		flex-direction: column;
	}

	/* 给页面内容预留出与footer等高的空间 */
	.content {
		flex: 1;
		padding-bottom: 14vw; /*设置与 footer 高度相同的底部内边距 */
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 历史订单列表部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order {
		width: 100%;
	}

	.wrapper .order li {
		width: 100%;
	}

	.wrapper .order li .order-info {
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 4vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order li .order-info .order-info-right {
		display: flex;
	}

	.wrapper .order li .order-info .order-info-right .order-info-right-icon {
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .order li .order-detailet {
		width: 100%;
	}

	.wrapper .order li .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 3vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
